<template>
  <div class="box">
    <div>
      <!-- provinces -->
      <select 
        v-if="isProvincesSelectorShow"
        @change="handleProvinceChange"
      >
        <option value="">请选择 - 省</option>
        <option 
          v-for="(info, provinceName) in provinces"
          :key="info.provinceCode"
          :value="`${info.provinceCode}:${info.provinceName}`"
        >{{provinceName}}</option>
      </select>

      <!-- cities -->
      <select 
        v-if="isCitiesSelectorShow"
        @change="handleCityChange"
      >
        <option value="">请选择 - 市</option>
        <option 
          v-for="(info, cityName) in cities"
          :key="info.cityCode"
          :value="`${info.cityCode}:${info.cityName}`"
        >{{cityName}}</option>
      </select>

      <!-- counties -->
      <select 
        v-if="isCountiesSelectorShow"
        @change="handleCountyChange"
      >
        <option value="">请选择 - 区县</option>
        <option 
          v-for="(info, countyName) in counties"
          :key="info.countyCode"
          :value="`${info.countyCode}:${info.countyName}`"
        >{{countyName}}</option>
      </select>
    </div>
  </div>
</template>
<script>
import cityInfo from './cityInfo';
export default {
  data() {
    return {
      provinces: null,
      cities: null,
      counties: null,
      selectedInfo: {
        province: null,
        city: null,
        county: null,
      }
    }
  },
  computed: {
    isProvincesSelectorShow() {
      return !!this.provinces
    },
    isCitiesSelectorShow() {
      return !!this.cities
    },
    isCountiesSelectorShow() {
      return !!this.counties
    },
  },
  mounted() {
      this.provinces = this.handleFormatData(cityInfo);
  },
  methods: {
    handleFormatData(data) {
      return data.reduce((pre1, next1) => {
        next1.cities = next1.cities.reduce((pre2, next2) => {
          next2.counties = next2.counties.reduce((pre3, next3) => {
            pre3[next3.countyName] = next3;
            return pre3;
          }, {})
          pre2[next2.cityName] = next2;
          return pre2;
        }, {})
        pre1[next1.provinceName] = next1;
        return pre1;
      }, {})
    },
    handleProvinceChange(e) {
      const { value } = e.target;
      if (!value) {
        this.selectedInfo.province = null;
        this.selectedInfo.city = null;
        this.selectedInfo.county = null;
        this.cities = null;
        this.counties = null;
        return 
      }
      const [code, name] = value.split(':');
      this.cities = this.provinces[name].cities;
      this.counties = null;
      this.selectedInfo.province = {
        code,
        name
      };
      let {province, city, county} = this.selectedInfo;
      console.log(province?.name, city?.name, county?.name, 'selectedInfo');
    },  
    handleCityChange(e) {
      const { value } = e.target;
      if(!value) {
        this.selectedInfo.city = null;
        this.selectedInfo.county = null;
        this.counties = this.counties;
        return 
      } 
      const [code, name] = value.split(':');
      this.counties = this.cities[name].counties;
      this.selectedInfo.city = {
        code,
        name
      };
      this.selectedInfo.county = {};
      let {province, city, county} = this.selectedInfo;
      console.log(province?.name, city?.name, county?.name, 'selectedInfo');
    },
    handleCountyChange(e) {
      const { value } = e.target;
      if(!value) {
        this.selectedInfo.county = null;
        return 
      }
      const [code, name] = value.split(':');
      this.selectedInfo.county = {
        code,
        name
      };
      console.log(province?.name, city?.name, county?.name, 'selectedInfo');
    },
  },
}
</script>